<script setup lang="ts">
  import { ref, defineProps, reactive, defineExpose } from "vue"
  import { createMessage } from '@/Public-UIlibrary/pb-message/method'
  import { getRoleSave, getRoleEdit, getTenantSubKitchen } from '@/api/organizeFramework'

  import RoleTree from "./RoleTree.vue"
  const props = defineProps({
    levelList: {
      type: Array,
      default: () => []
    },

  })
  let emits = defineEmits('onConfirmModal')
  const RoleTreeRef = ref()
  let loading = ref(false)
  const initialFrom = {
    fromTenantId: "",
    roleName: "",
    description: "",
    roleId: '',
    toTenantIds: [],
    resourceIds: []
  }
  let roleResource = ref([])
  let roleFrom = ref({
    ...initialFrom
  })
  //  食堂列表
  const kitchenList = ref()
  const RoleFromRef = ref()
  let RoleModalShow = ref(false)
  const onShow = async (row, id) => {
    roleFrom.value.fromTenantId = id
    await getTenantSubKitchenApi()
    if (row) {
      roleResource.value = row.resourceIds
      let { fromTenantName, createTime, tenantLevelName, toTenantNames, ...needFrom } = row
      roleFrom.value = { ...needFrom }
      kitchenList.value.forEach(it => {
        if (roleFrom.value.toTenantIds.includes(it.tenantId)) {
          it.checked = true
        }
      });
    }
    RoleModalShow.value = true


    setTimeout(() => {
      RoleTreeRef.value.getRsourceTreeApiFn(roleFrom.value.fromTenantId)
    })
  }
  // 选种食堂发生变化
  const checkChange = (list) => {
    console.log(list);
    roleFrom.value.toTenantIds = []
    list.forEach(it => {
      if (it.checked == true) {
        roleFrom.value.toTenantIds.push(it.tenantId)
      }
    }

    )
  }
  const onConfirmFn = () => {
    RoleFromRef.value.validate((valid) => {
      if (valid) {
        if (roleFrom.value.roleId) {
          getRoleEditApi()
        } else {
          getRoleSaveApi()
        }

      } else {

      }
    })
  }
  // 关闭表单重置
  const cancelFn = () => {
    RoleFromRef.value.resetFields();
    Object.assign(roleFrom.value, initialFrom);
    roleResource.value = []

  }
  // 获取食堂列表接口 
  const getTenantSubKitchenApi = async () => {
    let res = await getTenantSubKitchen({ fromTenantId: roleFrom.value.fromTenantId })
    if (res.code == 2000) {
      kitchenList.value = res.data
    }
  }
  // 添加角色接口
  const getRoleSaveApi = async () => {
    loading.value = true
    roleFrom.value.resourceIds = RoleTreeRef.value.getCheckedNodes()
    let res = await getRoleSave({ ...roleFrom.value })
    loading.value = false
    if (res.code == 2000) {
      createMessage({
        message: '添加成功',
        type: 'success',
      })
      RoleModalShow.value = false
      emits('onConfirmModal')
    }
  }
  // 编辑角色接口
  const getRoleEditApi = async () => {
    loading.value = true
    roleFrom.value.resourceIds = RoleTreeRef.value.getCheckedNodes()
    let { fromTenantId, ...params } = roleFrom.value
    let res = await getRoleEdit({ ...roleFrom.value })
    loading.value = false
    if (res.code == 2000) {
      createMessage({
        message: '编辑成功',
        type: 'success',
      })
      RoleModalShow.value = false
      emits('onConfirmModal')
    }
  }

  defineExpose({ onShow })

</script>

<template>
  <pb-popup v-model="RoleModalShow" :title="roleFrom.roleId ? '编辑' : '新增'" Width="1065" @confirmFn="onConfirmFn"
    @cancelFn="cancelFn" :loading="loading">
    <el-form :model="roleFrom" ref="RoleFromRef" label-width="auto" inline="true">
      <el-form-item label="角色名称" prop="roleName" :rules="[
        {
          required: true,
          message: '请输入角色名称',
          trigger: 'blur',
        }, ]">
        <pb-input v-model=" roleFrom.roleName" placeholder="请输入角色名称" />
      </el-form-item>
      <el-form-item label="关联食堂" prop="description">
        <pb-check :list="kitchenList" :defaultProps="{ label: 'tenantName' }" :isSingle="true"
          @change="(list) => checkChange(list,'checkTypeArr')"></pb-check>
      </el-form-item>
      <el-form-item label="角色描述" prop="description">
        <pb-input v-model=" roleFrom.description" placeholder="请输入角色描述" />
      </el-form-item>
    </el-form>
    <div class="ml-2">
      角色权限：
    </div>
    <div class="treeBox">
      <RoleTree :fromTenantId="roleFrom.fromTenantId" :resourceIdList="roleResource" ref="RoleTreeRef"></RoleTree>
    </div>

  </pb-popup>
</template>

<style lang="scss" scoped>
  .treeBox {
    max-height: 500px;
    overflow: auto;
    margin: 15px 0;
  }
</style>
